<template>
    <div style="margin: 10px">
      <div style="display: flex;width: 100%;height: 850px">
        <el-card style="width: 50%;margin-right: 10px">
          <h2 slot="header">诊断参数设置</h2>
          <div style="display: flex">

              <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect1"  placeholder="车种">
                <el-option v-for="item in typeSelectData1" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>

              <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect2"  placeholder="车型">
                <el-option v-for="item in typeSelectData2" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
              <el-select v-model="typeSelect3"  placeholder="车号" style="width: 33%">
                <el-option v-for="item in typeSelectData3" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>

          </div>
          <div style="height: 20px"></div>
          <div style="display: flex;align-items: center">
              <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect4"  placeholder="诊断位置">
                <el-option v-for="item in typeSelectData4" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>

              <el-select style="margin-right: 10px;width: 33%" v-model="typeSelect5"  placeholder="诊断参数">
                <el-option v-for="item in typeSelectData5" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            <div style="width: 33%">

            </div>
          </div>
          <el-divider></el-divider>
          <div style="width: 100%">
            <el-image style="height: 200px;width:100%" :src="require('../../assets/img/device.png')" :fit="'fill'"></el-image>
          </div>
          <el-divider></el-divider>
          <el-button type="primary" size="medium">开始诊断</el-button>
        </el-card>
        <el-card style="width: 66%">
          <h2 slot="header">诊断结果预览</h2>
          <div><span style="font-size: 18px;color: black">诊断结果：</span>{{result}}</div>
          <el-divider></el-divider>
          <div><span style="font-size: 18px;color: black">用时：</span>{{time}}</div>
          <el-divider></el-divider>
          <div><span style="font-size: 18px;color: black;">详细信息：<div style="min-height: 500px">{{detail}}</div></span></div>
          <el-divider></el-divider>
          <div style="text-align: center">
            <el-button type="primary" size="medium">下载</el-button>
          </div>
        </el-card>
      </div>
    </div>
</template>

<script>
    export default {
        name: "DiagnosisCard",
      data(){
          return{
            typeSelect1:'',
            typeSelect2:'',
            typeSelect3:'',
            typeSelect4:'',
            typeSelect5:'',
            typeSelectData2:[{name:'BC-769',value:'1'},{name:'GT-525',value:'2'},{name:'BD-656',value:'3'}],
            typeSelectData1:[{name:'跑车',value:'1'}],
            typeSelectData4:[{name:'风轮叶片',value:'1'},{name:'发电机',value:'2'},{name:'转轮',value:'2'}],
            typeSelectData3:[{name:'京A1234',value:'1'},{name:'京A1ds4',value:'2'}],
            typeSelectData5:[{name:'震动',value:'1'},{name:'温度',value:'2'},{name:'噪声',value:'3'},{name:'真空率',value:'4'},{name:'功率',value:'5'}],
            detail:'冷却系严重漏水；隔绝水套与气缸的气缸垫\n' +
              '被冲坏；节温器主阀门脱落；风扇传动带松\n' +
              '脱或断裂；水泵轴与叶轮松脱；风扇离合器\n',
            result:'危险系数高',
            time:'30秒'
          }
      }
    }
</script>

<style scoped>

</style>
